﻿@*@page "/utilities/display"

<Pager Title="显示(Display)">	
	<Demo Title="Inline">
		<Run>
		<Element Display="Display.Inline" BgColor="BgColor.Primary" TextColor="TextColor.White" Padding="Padding.Is2">Inline</Element>
		<Element Display="Display.Inline" BgColor="BgColor.Dark" TextColor="TextColor.White" Padding="Padding.Is2">Inline</Element>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Element Display=""Display.Inline"" BgColor=""BgColor.Primary"" TextColor=""TextColor.White"">Inline</Element>
<Element Display=""Display.Inline"" BgColor=""BgColor.Dark"" TextColor=""TextColor.White"">Inline</Element>
```
")
		</Code>
	</Demo>
	<Demo Title="Block">		
		<Run>
		<Element Display="Display.Block" BgColor="BgColor.Primary" TextColor="TextColor.White" Padding="Padding.Is2">Block</Element>
		<Element Display="Display.Block" BgColor="BgColor.Dark" TextColor="TextColor.White" Padding="Padding.Is2">Block</Element>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Element Display=""Display.Block"" BgColor=""BgColor.Primary"" TextColor=""TextColor.White"">Block</Element>
<Element Display=""Display.Block"" BgColor=""BgColor.Dark"" TextColor=""TextColor.White"">Block</Element>
```
")
		</Code>
	</Demo>
	<Demo Title="响应式">		
		<Description>
			你可以使用 <kbd>F12</kbd> 的开发者工具的响应式模式查看效果。
		</Description>
		<Run>
		<Element Display="Display.Block.OnMobile.Inline.OnDesktop" BgColor="BgColor.Primary" TextColor="TextColor.White" Padding="Padding.Is2">Block Mobile, Inline Desktop</Element>
		<Element Display="Display.None.OnTablet.Inline.OnMobile" BgColor="BgColor.Dark" TextColor="TextColor.White" Padding="Padding.Is2">Hide Tablet, Inline Mobile</Element>
		</Run>
		<Code>
			@MD.Write(@"
```html
<Element Display=""Display.Block.OnMobile.Inline.OnDesktop"" BgColor=""BgColor.Primary"" TextColor=""TextColor.White"">Block Mobile, Inline Desktop</Element>
<Element Display=""Display.None.OnTablet..Inline.OnMobile"" BgColor=""BgColor.Dark"" TextColor=""TextColor.White"">Hide Tablet, Inline Mobile</Element>
```
")
		</Code>
	</Demo>
</Pager>*@